<template>
	<view class="u-wrap" :style="{'height':height+'px'}">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
				:scroll-into-view="itemId">
				<view v-for="(item, index) in leftMenus" :key="index" class="u-tab-item"
					:class="[leftMenusCurrent == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{ item.name }}</text>
				</view>
				<view class="blank20"></view>
				<view class="blank20"></view>
				<view class="blank20"></view>
				<view class="blank20"></view>
			</scroll-view>
			<view class="right-box">
				<scroll-view scroll-y scroll-with-animation class="flex-1 scroll-view" :scroll-into-view="scrollViewId" @scrolltolower="scrolltolower">
					<view class="page-view">
						<view class="item-container">
							<template v-for="(item,index) in list">
								<view :key="item.id" :id="'scrollView_'+index">
									<view class="blank20"></view>
									<u-divider :text="item.name"></u-divider>
									<template v-for="(v,i) in item.list">
										<view class="blank20"></view>
										<view class="flex">
											<u--image :src="v.image_1920?'data:image/png;base64,'+v.image_1920:''" shape="square" radius="8" width="72" height="72"></u--image>
											<view class="flex-1 ml15" style="height: 72px;display: flex;flex-direction: column;justify-content: space-between;">
												<view class="text-ellipsis">
													{{v.dish_key_name}}
												</view>
												<view class="font-26 text-ellipsis">
													<text class="text-gray">售价：</text>
													<text class="text-red">￥{{v.price}}</text>
												</view>
												<view class="flex" style="justify-content: flex-end;">
													<view v-show="disabledObj[v.date+'||'+v.dinner_type_id+'||'+v.dish_key_id]" class="text-primary">
														已下单
													</view>
													<view v-show="(!valueObj[v.dish_key_id] || valueObj[v.dish_key_id] == 0) && !disabledObj[v.date+'||'+v.dinner_type_id+'||'+v.dish_key_id]">
														<u-button type="primary" size="small" text="添加" :plain="true" @click="add(v.dish_key_id)"></u-button>
													</view>
													<view class="" v-show="valueObj[v.dish_key_id] && valueObj[v.dish_key_id] > 0">
														<u-number-box v-model="valueObj[v.dish_key_id]" @change="valChange" :min="min"
															:max="1" :name="v.dish_key_id" :asyncChange="true" bgColor="#ffffff" @overlimit="overlimit"
															:buttonSize="20" :disabledInput="true"  :showPlus="false">
															<view slot="minus" class="minus">
																<u-icon name="minus" size="12"></u-icon>
															</view>
															<view slot="plus" class="plus">
																<u-icon name="plus" size="12"></u-icon>
															</view>
														</u-number-box>
													</view>
												</view>
											</view>
										</view>
									</template>
								</view>
							</template>
							<view class="blank20"></view>
							<view class="blank20"></view>
							<view class="blank20"></view>
							<view class="blank20"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "dish-list",
		components: {
		},
		props: {
			height: Number,
			data: Array,
			menu: Array,
			packed:Array
		},
		data() {
			return {
				leftMenus: [],
				list: [],
				leftMenusCurrent: 0,
				itemId: "", // 栏目右边scroll-view用于滚动的id
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0,
				scrollViewId: '',
				valueObj: {},
				min: 0,
				dataTreeObj:{},
				disabledObj:{}
			};
		},
		watch: {
			data:{
				handler(newVal, oldVal){
					this.onDataChange();
					console.log(newVal);
				},
				deep: true,
				immediate:true
			},
			packed:{
				handler(newVal, oldVal){
					this.setDisabledObj()
				},
				deep: true,
				immediate:true
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				this.onDataChange();
				this.setDisabledObj()
			},
			setDisabledObj(){
				let disabledObj = {};
				this.packed.forEach(v=>{
					let {date,dinner_type_id,dish_key_id} = v;
					disabledObj[`${date}||${dinner_type_id[0]}||${dish_key_id[0]}`] = true;
				})
				this.disabledObj = disabledObj;
			},
			onDataChange(){
				// console.log('onDataChange');
				let dataTreeObj = {};
				let dataTreeList = [];
				let leftMenus = [];
				let _l = 0;
				this.data.forEach(v=>{
					let { dish_top_category_name } = v;
					if(!dataTreeObj[dish_top_category_name]){
						_l = dataTreeList.push({
							name:dish_top_category_name,
							list:[]
						})
						leftMenus.push({
							name:dish_top_category_name
						})
						dataTreeObj[dish_top_category_name] = 1;
					}
					dataTreeList[_l-1].list.push(v);
				})
				this.leftMenusCurrent = 0;
				this.leftMenus = leftMenus;
				this.list = dataTreeList;
			},
			// 份数
			valChange(e) {
				console.log(e);
				this.valueObj[e.name] = e.value;
				this.$forceUpdate();
				this.updata();

				// 此处待增加 出库数量不能大于库存数量 判断
				// uni.$u.toast('出库数量不能大于库存数量');
			},
			overlimit(e) {
				console.log("overlimit");
				console.log(e);
			},
			updataValueObj(obj){
				this.valueObj = obj;
				this.$forceUpdate();
			},
			add(id) {
				this.valueObj[id] = 1;
				this.$forceUpdate();
				this.updata();
			},
			updata() {
				let bagList = [];
				this.$emit("updata", this.valueObj);
			},
			scrolltolower() {
				
			},
			// 点击左边的栏目切换
			swichMenu(index) {
				if (index == this.current) return;
				this.leftMenusCurrent = index;
				this.scrollViewId = 'scrollView_'+index
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "./dish-list.scss";
</style>